import { Image, Typography } from 'antd';
import { useSelector } from 'react-redux';
import { useParams } from 'react-router-dom';

import SMSComponent from './sms';
import styles from './style.module.less';

import * as APIS from '../../../../constants/api-constants';

const { Paragraph } = Typography;

interface UrlProps {
  questionnaireUuid: string,
}

const QuestionAnswerVerification = () => {
  const { questionnaireUuid } = useParams<UrlProps>();
  const { description, logo } = useSelector((storeState: QA.ReduxState) => ({
    description: storeState.description,
    logo: storeState.logo
  }));
  const { container } = styles;

  return (
    <div className={container}>
      <Image
        src={`${APIS.IMAGE}/?filename=${logo}`}
      />

      <SMSComponent questionnaireUuid={questionnaireUuid} />
      <Paragraph>
        <blockquote>{description}</blockquote>
      </Paragraph>
    </div>
  );
};

export default QuestionAnswerVerification;
